<template>
  <div class="p-2">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>服务商：{{ form.gsmc }}</span>
        </div>
      </template>
      <el-collapse v-model="activeName" class="border_top_0">
        <el-collapse-item title="基础信息" name="1">
          <div class="row">
            <div class="col">
              <div class="label">
                服务商名称：
              </div>
              <div class="value"> {{ form.gsmc||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                区域：
              </div>
              <div class="value">
                <div class="value"> {{ form.unitAreaName||'' }} </div>
              </div>
            </div>
            <div class="col">
              <div class="label">
                纳税人识别码：
              </div>
              <div class="value">
                <div class="value"> {{ form.nsrSbh||'' }} </div>
              </div>
            </div>
            <div class="col">
              <div class="label">
                法人姓名：
              </div>
              <div class="value"> {{ form.fr||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                法人身份证号：
              </div>
              <div class="value"> {{ form.frCardid||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                法人手机号：
              </div>
              <div class="value"> {{ form.frPhone||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                联系人姓名：
              </div>
              <div class="value"> {{ form.conName||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                联系人手机号：
              </div>
              <div class="value"> {{ form.conPhone||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                联系人身份证号：
              </div>
              <div class="value"> {{ form.conCardid||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                联系人邮箱：
              </div>
              <div class="value"> {{ form.conEmail||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                实际经营地址：
              </div>
              <div class="value"> {{ form.address||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                经营范围：
              </div>
              <div class="value"> {{ form.business||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                税地归属：
              </div>
              <div class="value"> {{ form.threeId||'' }} </div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="账户信息" name="2">
          <div class="row">
            <div class="col">
              <div class="label">
                开户银行：
              </div>
              <div class="value">
               <!-- <dict-tag
                  :options="bank_list"
                  :value="form.kfh"
                />-->
                 {{ form.kfh||'' }}
              </div>
            </div>
            <div class="col">
              <div class="label">
                开户支行：
              </div>
              <div class="value"> {{ form.kfd||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                联行号：
              </div>
              <div class="value"> {{ form.khhNo||'' }} </div>
            </div>
            <div class="col">
              <div class="label">
                开户账号：
              </div>
              <div class="value"> {{ form.bankCard||'' }} </div>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="相关资质" name="3">
          <div class="row">
            <div class="col">
              <div class="label">
                营业执照：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.yyzz"
                  :preview-src-list="[form.yyzz]"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                开户许可证：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.khxkz"
                  :preview-src-list="[form.khxkz]"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                法人身份证正面：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.frSfzzm"
                  :preview-src-list="[form.frSfzzm]"
                />
              </div>
            </div>
            <div class="col">
              <div class="label">
                法人身份证反面：
              </div>
              <div class="value">
                <ImagePreview
                  :width="100"
                  :height="100"
                  :src="form.frSfzfm"
                  :preview-src-list="[form.frSfzfm]"
                />
              </div>
            </div>
          </div>
        </el-collapse-item>

      </el-collapse>
    </el-card>
  </div>
</template>

<script setup name="agentDetail" lang="ts">
import api from '@/api/service/addService';
import { addOrEditServiceForm } from '@/api/service/addService/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { bank_list } = toRefs<any>(proxy?.useDict('bank_list'));

const activeName = ref<Array<string|number>>(['1','2','3'])

const form = ref<addOrEditServiceForm>({
  id: '',
  gsmc: '',
  unitArea: '',
  unitAreaName: '',
  nsrSbh: '',
  fr: '',
  frCardid: '',
  frPhone: '',
  conName: '',
  conPhone: '',
  conCardid: '',
  conEmail: '',
  address: '',
  busScope: '',
  jbsl: '',
  khd: '',
  kfd: '',
  kfh: '',
  khhNo: '',
  bankCard: '',
  bankType: '',
  yyzz: '',
  khxkz: '',
  frSfzzm: '',
  frSfzfm: ''
});

const route = useRoute();
/** 查询企业信息 */
const getInfoData = async () => {
  const res = await api.serviceDetail(serviceId.value);
  form.value = res.data;
};

const serviceId = ref<any>('');
onMounted(() => {
  if (route.query.id) {
    serviceId.value = route.query.id;
    getInfoData(); // 查询企业信息
  }
});
</script>

<style lang="scss" scoped>
</style>
